<template>
	<div class="citylist" ref="wrapper">
		<div>
			<div class="area">
				<div class="title">您的位置</div>
				<div class="button-list">
					<div class="button-wrap">
						<div class="button">{{this.$store.state.city}}</div>
					</div>
				</div>
			</div>
			<div class="area">
				<div class="title">热门城市</div>
				<div class="button-list">
					<div 
					class="button-wrap" 
					v-for="item of hotCities"
					:key='item.id'
					@click="handleCityClick(item.name)">
						<div class="button">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div 
			class="area"
			v-for="(item,key) of cities"
			:key="key"
			:ref="key"
			>
				<div class="title">{{key}}</div>
				<div 
				class="item-list"
				v-for="innerItem of item"
				:key="innerItem.id"
				@click="handleCityClick(innerItem.name)"
				>
					<div class="item">{{innerItem.name}}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
	name:'CityList',
	props:{
		hotCities:Array,
		cities:Object,
		alpha:String
	},
	watch:{
		alpha () {
			if (this.alpha) {
				const element = this.$refs[this.alpha][0]
				this.scroll.scrollToElement(element)
			}
		}
	},
	methods: {
		handleCityClick (city) {
			this.$store.dispatch('changeCity',city)
			this.$router.push('/')
		}
	},
	mounted () {
		this.scroll = new BScroll(this.$refs.wrapper ,{
			click: true
		})
	}
}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.citylist
		overflow hidden
		position absolute
		top 1.58rem
		right 0
		left 0
		bottom 0
		.title
			line-height .54rem
			background #eee
			border-top solid 1px #ccc
			border-bottom solid 1px #ccc
			padding-left .2rem
		.button-list
			padding .1rem .6rem .1rem .1rem
			overflow hidden
			.button-wrap
				width 33%
				float left
				.button
					text-align center
					padding .1rem 0
					margin .1rem
					border .02rem solid $bgColor
					border-radius .06rem
		.item-list
			.item
				line-height .76rem
				padding-left .2rem
				border-bottom .02rem solid #ccc
</style>